<html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>请假外出、返校权限查询通行码</title>

	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			background-color: #eeeeee;
			font-size: 0.9rem;
		}
		.up{
			width: 100vw;
			height: 8vh;
      color: #5383ec;
			background-color: white;
		}
		.up-text{
			width: 45vw;
			height: 7.5vh;
			font-size: 1rem;
			margin-left: 1vw;
      text-align: center;
      line-height: 7.5vh;
      /* display: flex;
      align-items: center; */
			border-bottom: 3px solid #5383ec;
		}
		.topic{
      width: 94vw;
      height: 7vh;
      font-size: 0.8rem;
      line-height: 7vh;
      margin-top: 2vh;
      margin-left: 3vw;
      padding-left: 3vw;
      background-color: white;
      font-weight: bold;
		}
    .topic img{
      width: 2vh;
      height: 2vh;
      margin-right: 1vw;
      transform: translateY(10%);
    }
    .info-title{
      color: #888;
      margin-left: 3vw;
      margin-top: 2vw;
      margin-bottom: 2vw;
    }
    .info-text{
      width: 100vw;
      height: 8vh;
      color: #76777a;
      line-height: 8vh;
      background-color: white;
      text-align: center;
    }
    .QR-code{
      width: 100vw;
      color: #76777a;
      background-color: white;
      text-align: center;
      padding-top: 5%;
      padding-bottom: 5%;
    }
    .QR-code img{
      width: 40vw;
      height: 40vw;
    }
    .permit{
      font-weight: bold;
      font-size: 1.2rem;
      color: #01bb00;
    }
    .info-last{
      margin-bottom: 12vh;
    }
    .footer{
      position: fixed;
      bottom: 0;
      left: 0;
      padding-left: 2vw;
      padding-top: 4vw;
      padding-bottom: 2vw;
      width: 100vw;
      height: 6.5vh;
      background-color: white;
    }
    .gengduo{
      width: 30vw;
      height: 6vh;
      border: 1px solid #5383ec;
      border-radius: 50px;
      color: #5383ec;
      text-align: center;
      line-height: 6vh;
    }
    .input-box{
      width: 80vw;
      /* height: 40vh; */
      margin-top: 20vh;
      margin-left: 10vw;
      margin-bottom: 5vh;
      border: 5px solid #5383ec;
      border-radius: 50px;
      font-size: 1.2rem;
    }
    .input-box div{
      width: 70vw;
      height: 5vh;
      margin: 0 auto;
      text-align: center;
    }
    button{
      margin-right: 2vw;
    }
	</style>
<style type="text/css" id="a730c2ce-6226-411c-809d-bd901a07323f">.fc351240-2578-4348-a0ba-75a961a21864 { position: relative !important; border-radius: 0.2em !important; padding: 0px !important; margin: 0px !important; }

.de1088cb-9599-4da8-8f03-b456b942b858 .ssh-close { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; z-index: 999; border: none; background: url("") no-repeat border-box; animation-duration: 275ms; animation-timing-function: ease-out; box-shadow: none; animation-name: fa7ebce0-1024-4830-a369-8897713fdc96; }

.de1088cb-9599-4da8-8f03-b456b942b858 .ssh-close:hover, .de1088cb-9599-4da8-8f03-b456b942b858 .ssh-close:focus { background-image: url(""); }

@media print {
  .de1088cb-9599-4da8-8f03-b456b942b858 { box-shadow: unset !important; -webkit-print-color-adjust: exact !important; }
}

@keyframes fa7ebce0-1024-4830-a369-8897713fdc96 { 
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes d07a220b-600f-4805-ad25-ad1851532f6e { 
  100% { opacity: 0; transform: scale(0.3); }
}

.de1088cb-9599-4da8-8f03-b456b942b858 { background-color: rgba(238, 238, 238, 0.8); color: rgb(170, 170, 170); font: inherit; box-shadow: rgb(238, 238, 238) 0px 0px 0.35em; text-shadow: none !important; }

.default-red-aa94e3d5-ab2f-4205-b74e-18ce31c7c0ce { box-shadow: rgb(255, 128, 128) 0px 0px 0.35em; background-color: rgba(255, 128, 128, 0.8) !important; color: rgb(0, 0, 0) !important; }

.default-orange-da01945e-1964-4d27-8a6c-3331e1fe7f14 { box-shadow: rgb(255, 210, 170) 0px 0px 0.35em; background-color: rgba(255, 210, 170, 0.8) !important; color: rgb(0, 0, 0) !important; }

.default-yellow-aaddcf5c-0e41-4f83-8a64-58c91f7c6250 { box-shadow: rgb(255, 255, 170) 0px 0px 0.35em; background-color: rgba(255, 255, 170, 0.8) !important; color: rgb(0, 0, 0) !important; }

.default-green-c4d41e0a-e40f-4c3f-91ad-2d66481614c2 { box-shadow: rgb(170, 255, 170) 0px 0px 0.35em; background-color: rgba(170, 255, 170, 0.8) !important; color: rgb(0, 0, 0) !important; }

.default-cyan-f88e8827-e652-4d79-a9d9-f6c8b8ec9e2b { box-shadow: rgb(170, 255, 255) 0px 0px 0.35em; background-color: rgba(170, 255, 255, 0.8) !important; color: rgb(0, 0, 0) !important; }

.default-purple-c472dcdb-f2b8-41ab-bb1e-2fb293df172a { box-shadow: rgb(255, 170, 255) 0px 0px 0.35em; background-color: rgba(255, 170, 255, 0.8) !important; color: rgb(0, 0, 0) !important; }

.default-grey-da7cb902-89c6-46fe-b0e7-d3b35aaf237a { box-shadow: rgb(119, 119, 119) 0px 0px 0.35em; background-color: rgba(119, 119, 119, 0.8) !important; color: rgb(255, 255, 255) !important; }</style></head>
<body>
  <div class="input-box" id="input-box" style="text-align: center; display: none;">
    <p style="font-size: 3rem;">反复横跳！</p>
    <div>你的名字：<input type="text" name="" id="input-name" placeholder="李霸天"></div>
    <div>你的学院：<input type="text" name="" id="input-aca" placeholder="信息与通信工程学院"></div>
    <div>你的学号：<input type="text" name="" id="input-number" placeholder="2020210777"></div>
    <div><button onclick="Enter(0)">“我想进去可以吗”</button><button onclick="Enter(1)">“放我出去吧”</button></div>
  </div>
	<div class="content" id="content" style="">
		<div class="up">
			<div class="up-text">申请表单</div>
		</div>
		<div class="topic">
      <div class="topic-text"><img src="https://i.bmp.ovh/imgs/2020/09/04d93329ad7c7ab4.png">请假外出、返校权限查询</div>
    </div>
    <div class="infos">
      <div class="info">
        <div class="info-title">姓名</div>
        <div class="info-text" id="info-name">李霸天</div>
      </div>
      <div class="info">
        <div class="info-title">学院</div>
        <div class="info-text" id="info-aca">信息与通信工程学院</div>
      </div>
      <div class="info">
        <div class="info-title">状态码</div>
        <div class="QR-code"><img src="https://i.bmp.ovh/imgs/2020/09/e7f5c9eb667fb424.png"></div>
      </div>
      <div class="info">
        <div class="info-title">状态</div>
        <div class="info-text permit" id="status">允许出校</div>
      </div>
      <div class="info">
        <div class="info-title">学工号</div>
        <div class="info-text" id="info-number">2020210777</div>
      </div>
      <div class="info info-last">
        <div class="info-title">出入校时间</div>
        <div class="info-text" id="time">2020-09-11 14:58:21</div>
      </div>
    </div>
    <!-- footer使用固定布局 -->
    <div class="footer">
      <div class="gengduo">更多</div>
    </div>
  </div>
  <script type="text/javascript">
    function curDateTime() {
      var d = new Date();
      var year = d.getYear();
      var month = d.getMonth() + 1;
      var date = d.getDate();
      var day = d.getDay();
      var hours = d.getHours();
      var minutes = d.getMinutes();
      var seconds = d.getSeconds();
      var ms = d.getMilliseconds();
      var curDateTime = String(1900 + parseInt(year));
      if (month > 9)
        curDateTime = curDateTime + "-" + month;
      else
        curDateTime = curDateTime + "-0" + month;
      if (date > 9)
        curDateTime = curDateTime + "-" + date;
      else
        curDateTime = curDateTime + "-0" + date;
      if (hours > 9)
        curDateTime = curDateTime + " " + hours;
      else
        curDateTime = curDateTime + "0" + hours;
      if (minutes > 9)
        curDateTime = curDateTime + ":" + minutes;
      else
        curDateTime = curDateTime + ":0" + minutes;
      if (seconds > 9)
        curDateTime = curDateTime + ":" + seconds;
      else
        curDateTime = curDateTime + ":0" + seconds;
      return curDateTime;
    };
    curTime = curDateTime();
    
    function Enter(e) {
      console.log(e)
      var name = document.getElementById("input-name").value;
      var aca = document.getElementById("input-aca").value;
      var number = document.getElementById("input-number").value;

      document.getElementById("content").style.display = "";
      document.getElementById("input-box").style.display = "none";

      if (name != '') {
        document.getElementById("info-name").innerHTML = name;
      }
      if (aca != '') {
        document.getElementById("info-aca").innerHTML = aca;
      }
      if (number != '') {
        document.getElementById("info-number").innerHTML = number;
      }
      var status = ['允许入校', '允许出校'];
      document.getElementById("status").innerHTML = status[parseInt(e)];
      document.getElementById("time").innerHTML = curTime;
    }
  </script>

</body></html>